<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,ol{
            list-style: none;
        }

        .scarch{
            width: 700px;
            height: 100px;
            margin: 50px auto;
            position: relative;
        }

        .scarch input{
            width: 100%;
            height: 40px;
            outline: none;
            border: 2px solid #369;
            border-radius: 20px;
            box-sizing: border-box;
            font-size: 18px;
            text-indent: 1em;
        }

        .scarch button{
            width: 80px;
            height: 30px;
            background: #369;
            border: 0;
            border-radius: 15px;
            position: absolute;
            top: 5px;
            right: 7px;
            color: #eee;
            cursor: pointer;
        }

        #lists{
            width: 700px;
            box-sizing: border-box;
            padding: 10px 10px 0;
            /* background: ; */
        }

        #lists li{
            box-sizing: border-box;
            padding-left: 5px;
            height: 30px;
            line-height: 30px;
            width: 100%;
            font-size: 18px;
            cursor: pointer;
        }

        #lists li:hover{
            background: #f0f0f0;
        }

        




    </style>
</head>

<body>
    <div class="scarch">
        <input type="text" id="inp"> <button id="btn">淘宝搜索</button>
        <ul id="lists">

        </ul>
    </div>



    <!-- @ 原生js版本 -->
    <!-- <script>
        var inp = document.getElementById("inp")
        var btn = document.getElementById("btn")

        btn.onclick = function () {
            var value = inp.value;
            jsonp("https://suggest.taobao.com/sug?k=1&area=c2c&q=" + value + "&code=utf-8&ts=1662107406099&callback=", function (data) {
                console.log(data);  //data为远程请求的数据

                var list = document.getElementById("lists");
                var listsData = data.result;
                var str = ""

                for (var i = 0; i < listsData.length; i++) {
                    str += "<li> " + listsData[i][0] + " </li>"
                }
                list.innerHTML = str;
            })
        }


        // jsonp 通过创建script标签,请求远程json数据,在callback相同函数名称下调用本地函数.获取数据.
        // 注意:创建script标签,考虑删除,不删除html中标签过多执行效率降低
        var jsonp = function (url, callback) {
            var callbackName = "jq_" + new Date().getTime(); //通过获取时间戳去创建函数名称
            var script = document.createElement("script"); //创建script标签
            script.src = url + callbackName; //添加属性值:url路径 用于请求远程json数据
            document.body.appendChild(script); //script添加到body

            // 在windo对象中临时创建一个方法 调用本地函数callback(),获取数据
            window[callbackName] = function (data) {
                callback(data); //调用外部方法，传入获得的数据
                document.body.removeChild(script); //删除script标签
                window[callbackName] = null; //清除全局中创建的方法

            }
        }

    </script> -->



    <!-- @ jq版本 -->
    <script src="./js/jquery-3.6.1.min.js"></script>
    <script>
        $("#btn").click(function () {
            $.ajax({
                url: "https://suggest.taobao.com/sug?k=1&area=c2c&code=utf-8&ts=1662107406099",
                data: {
                    q: $("#inp").val(),
                },
                dataType: "jsonp",
                jsonp: "callback",
                success: function (data) {
                    console.log(data);
                    var list = document.getElementById("lists");
                    var listsData = data.result;
                    var str = ""

                    for (var i = 0; i < listsData.length; i++) {
                        str += "<li> " + listsData[i][0] + " </li>"
                    }
                    list.innerHTML = str;
                }
            })
        })
    </script>

</body>

</html>